<template>


<div class="wrapper">
<!-- 静态组件（分类组件） -->
<!-- 定位部分 -->
    <div class="localpart">
        <div class="localfav1">
            <img src="../../assets/线性定位.svg" alt="">
        </div>
        <div class="local_content">北京理工大学国防科技园2号楼10层</div>
        <div class="localfav2">
            <img src="../../assets/211铃铛.svg" alt="">
        </div>
    </div>
<!-- 搜索框部分 -->
<div class="search">
    <div class="search_icon">
        <img src="../../assets/搜索.svg" alt="">
    </div>
    <input type="search" name="" placeholder="山姆会员商店优惠商品">
</div>
<!-- 轮播图部分 -->
<Carousel/>
<!-- 分类部分 -->
<Classify/>
<div class="line"></div>
<!-- 商铺组件
容器组件（其他组件都能够用到） -->
    <router-link to="/Login">
<!-- 跳转到登录页 -->
    </router-link>
    <router-link to="/Register">
<!-- 跳转到登录页 -->
    </router-link>
 <NearBy :goodsData="goodsData" @go="handler"/> 
   <Docker :index="1"/>
</div>     
</template>
<script>
export default {
    name:"home"
}
</script>
<script setup>
// console.log("home组件渲染");
import {Toast}from 'vant'
// import StaticPart from "./components/StaticPart.vue";
import NearBy from './components/NearBy.vue'
import Docker from '../../components/Docker.vue'
import Carousel from './components/Carousel.vue';
import Classify from './components/Classify.vue';
import { ref, reactive } from "vue";
import {get}from '../../utils/request'
let goodsData = ref([]);
let params=reactive({project_id:241,page:1,limit:5})
// 请求商品列表接口
const getDatas=async()=>{
  Toast.loading({
    message:'加载中...',
    forbidClick:true,
  })
let res=await get('/goods',params)
console.log(res,2222);
  goodsData.value = goodsData.value.concat(res.data.result.rows);
}
getDatas()

const handler=()=>{
  params.page++
  getDatas()
}
</script>

<style lang="scss" scoped>
// 定位部分
.localpart{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:0 auto;
    margin-top:0.324rem;
    width: 3.39rem;
    height: 0.22rem;
    
}
.localfav1{
    width: 0.154rem;
    height: 0.19rem;
    img{
        display: block;
        width: 0.154rem;
        height: 0.19rem;
    }

}
.local_content{
    font-size:0.16rem;
}
.localfav2{
    width: 0.183rem;
    height: 0.192rem;
    img{
        display: block;
        width: 0.183rem;
        height: 0.192rem;
    }

}
// 搜索部分
.search{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    margin:0 auto;
    margin-top:0.174rem;
    width: 3.39rem;
    height: 0.32rem;
    background-color:#F5F5F5;
    border-radius: 0.15rem;
}
.search_icon{
   
    width: 0.16rem;
    height: 0.16rem;
    img{
         margin-left:0.16rem;
        display: block;
        width: 0.16rem;
        height: 0.16rem;
        
    } 
}
input{
    margin-left: 0.3rem;
    width: 3.07rem;
    height: 0.32rem;
    background-color: #F5F5F5 ;
     border-radius: 0.15rem;
     outline: none;
     border:0;
     color:#B7B7B7;
     font-size:0.14rem;
}
// 轮播图部分
.swiper_img{
    margin:0 auto;
    margin-top:0.12rem;
    width: 3.39rem;
    height: 0.86rem;
    background-color: pink;
    border-radius:0.05rem;
}
.line{
    margin-top:0.16rem;
    width: 100%;
    height: 0.1rem;
    background-color: #F1F1F1;
}
.wrapper{
    margin-bottom:0.49rem;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom:0;
    // overflow-y: auto;
}
</style>